import React, { Component } from "react";

class TopInput extends Component {
  myInput = React.createRef();
  render() {
    return (
      <div>
        <input type="text" ref={this.myInput} />
        <button onClick={() => this.props.onAdd(this.myInput.current.value)}>
          确定添加
        </button>
      </div>
    );
  }
}
class List extends Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.listData.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}
class App extends Component {
  state = {
    listData: [],
  };
  handleAdd(value) {
    const list = [...this.state.listData, value];
    this.setState({ listData: list });
  }
  render() {
    return (
      <div>
        <TopInput onAdd={(value) => this.handleAdd(value)} />
        <List listData={this.state.listData} />
      </div>
    );
  }
}

export default App;
